<template>
	<view class="matchmain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">搭子铃</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-center d-flex-middle mb-8 mt-6">
			<text class="colorman mr-1 font30">5</text>
			<text class="colorfff font24">位搭子正在等你选择</text>
		</view>
		<view class="card" style="width: 90%; margin: 0 auto;">
			<view class="card_item mb-5 d-flex d-flex-middle d-flex-between" :style="{backgroundImage: `url(${i.bg})`}" v-for="i in DaziCardData" :key="i.id">
				<view class="d-flex">
					<view class="mr-2 mb-2" style="margin-left: 60rpx;">
						<image :src="i.image" style="width: 70rpx; height: 70rpx;"></image>
					</view>
					<view class="colorfff mb-2">
						<text class="font28 font-bold">{{i.title}}</text>
						<view class="d-flex">
							<text class="font24">{{i.desc}}</text>
							<view class="ml-1 d-flex-btn">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png" style="width: 30rpx; height: 25rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="colorfff py-1 px-2 rounded40 linerbg mr-5 mt-3">购买并使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				DaziCardData: [
					{
						id: 0,
						title: '同城卡',
						desc: '匹配同城搭子',
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202048.png',
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png',
						bg: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203411.png'
					},
					{
						id: 1,
						title: '性格卡',
						desc: 'MBTI',
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png',
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png',
						bg: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203412.png'
					},
					{
						id: 2,
						title: '今日不限次卡',
						desc: '不限次',
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202777.png',
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png',
						bg: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203413.png'
					},
					{
						id: 3,
						title: '性别卡',
						desc: '性别',
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202778.png',
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png',
						bg: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203414.png'
					},
					{
						id: 4,
						title: '开通会员享全部服务',
						desc: '奖励',
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202024.png',
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png',
						bg: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203415%402x.png'
					}
				]
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			}
		}
	}
</script>

<style scoped>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.metting-box {
	width: 98%;
	height: 940rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	overflow: hidden;
}
.linerbg-b {
	background: linear-gradient( 180deg, #61D1E5 0%, rgba(106,211,230,0.94) 10%, rgba(131,219,234,0.78) 29%, rgba(172,230,241,0.52) 54%, rgba(227,247,250,0.17) 86%, rgba(255,255,255,0) 100%);
}
.colorman{
	color:#5db0fe
}
.card_item {
	width: 100%;
	height: 180rpx;
	background-size: contain;
	background-repeat: no-repeat;
}
</style>
